<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleGoodsDataClose"
			:dialogFooterBtn="true"
		>
			<div class="send">
				<div class="goods">
					<div class="title mb16">商品信息</div>
					<div>
						<el-table :data="state.data.goodsVOS">
							<el-table-column label="商品信息" width="400">
								<template #default="scope">
									<div class="flex goods-item">
										<div style="width: 80px; height: 80px">
											<el-image :src="STATIC_URL + scope.row.image" />
										</div>
										<div class="right ml15">
											<div class="goods-title">
												{{ scope.row.title }}
											</div>
											<div class="goods-sku-text">
												<span v-for="(sku, index) in scope.row.skus" :key="sku" :class="{ ml5: index != 0 }"> {{ sku }} </span>
											</div>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="单价(元)" prop="price"></el-table-column>
							<el-table-column label="数量(个)" prop="quantity"></el-table-column>
							<el-table-column label="支付金额(元)" prop="totalPrice"></el-table-column>
						</el-table>
					</div>
				</div>

				<div class="address">
					<div class="title mb16">配送信息</div>
					<div class="ml16">
						<div class="flex mb10">
							<div class="label">收货信息:&nbsp;</div>
							<div class="content">{{ state.data.consignee }} - {{ state.data.mobile }}</div>
						</div>

						<div class="flex mb10">
							<div class="label">收货地址:&nbsp;</div>
							<div class="content">
								<div class="mb5">{{ state.data.province }} - {{ state.data.city }} - {{ state.data.country }}</div>
								<div>{{ state.data.address }}</div>
							</div>
						</div>
					</div>
				</div>

				<div class="express">
					<div class="title mb16">物流信息</div>
					<div class="ml16">
						<div class="mb16">
							<el-form label-width="100">
								<el-form-item label="发货方式">
									<el-radio-group v-model="state.params.sendWay">
										<el-radio :label="0">物流快递</el-radio>
										<el-radio :label="1">一件发货</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-form>
						</div>
						<el-form label-width="100" inline="true" v-if="state.params.sendWay == 0" ref="goodsSenderDialogFormRef" :model="state.params">
							<el-form-item label="快递公司" prop="expressId" :rules="{ required: true, message: '快递公司不能为空', trigger: 'change' }">
								<el-select style="width: 200px" v-model="state.params.expressId">
									<el-option v-for="item in state.expressList" :label="item.expressName" :value="item.id" />
								</el-select>
							</el-form-item>
							<el-form-item label="快递单号" prop="expressNo" :rules="{ required: true, message: '快递编号不能为空', trigger: 'blue' }">
								<el-input clearable v-model="state.params.expressNo" />
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleGoodsDataClose" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(goodsSenderDialogFormRef)" size="default">发货</el-button>
				</span>
			</template>
		</CustomDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { orderApi } from '/@/api/shop/order';
import { dataExpressApi } from '/@/api/shop/data/express';
import msg from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';
import type { FormInstance } from 'element-plus';
const goodsSenderDialogFormRef = ref();
const state = reactive({
	data: {} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '商品发货',
		submitTxt: '',
	},
	expressList: [] as any[],
	params: {
		sendWay: 0,
		expressId: '',
		expressNo: '',
	},
});

const emits = defineEmits(['refreshOrderStatus']);

const handleGoodsDataClose = () => {
	state.dialog.isShowDialog = false;
};

const openInit = async (id: any) => {
	console.log('order id : ', id);
	state.dialog.isShowDialog = true;
	try {
		console.log('id: ' + id);
		const { data } = await orderApi().view(id);
		state.data = data;
		console.log(data);
	} catch (error) {
		msg().error('产线订单详细信息失败');
	}
	initExpress();
};

const initExpress = async () => {
	try {
		const { data } = await dataExpressApi().list();
		console.log('express: ', data);
		state.expressList = data;
	} catch (error) {
		msg().error('查询快递公司列表失败');
	}
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, errors) => {
		if (valid) {
			try {
				await orderApi().sendGoods({
					id: state.data.id,
					sendWay: state.params.sendWay,
					expressId: state.params.expressId,
					expressNo: state.params.expressNo,
				});
				msg().success('发货成功');
				handleGoodsDataClose();
				emits('refreshOrderStatus', state.data.id);
			} catch (error) {
				msg().error('发货失败,请重新操作');
			}
		}
	});
};

defineExpose({
	openInit,
});
</script>

<style scoped lang="scss">
.send .address,
.send .express {
	line-height: 16px;
	font-size: 12px;
	font-weight: 400;
}

.send .address .title,
.send .goods .title,
.send .express .title {
	height: 32px;
	line-height: 32px;
	padding: 0 16px;
	background: var(--sd-table-header-bg);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 400;
	color: var(--sd-subtitle);
}

.send .address .label,
.send .express .label {
	color: var(--sd-subfont);
}

.send .address .content,
.send .express .content {
	color: var(--sd-subtitle);
}
</style>
